<template>
  <div class="app-container">
    <!--工具条-->
    <el-form :inline="true" :model="filters" size="small">
      <el-form-item label="订单号">
        <el-input v-model="filters.orderSn" placeholder="订单号" />
      </el-form-item>
      <el-form-item label="订单状态">
        <el-select v-model="filters.orderStatus" placeholder="订单状态" clearable>
          <el-option v-for="item in statusList" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
      </el-form-item>
      <el-form-item label="选择日期">
        <el-date-picker
          v-model="filters.date"
          type="daterange"
          align="right"
          unlink-panels
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          value-format="yyyy-MM-dd"
          :picker-options="pickerOptions">
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="init">查询</el-button>
      </el-form-item>
    </el-form>

    <!--列表-->
    <el-table v-loading="loading" :data="data" highlight-current-row>
      <el-table-column type="selection" width="45"/>
      <el-table-column prop="orderSn" label="订单号" min-width="120">
        <template slot-scope="scope">
          <el-button type="text" @click="handleView(scope.row)">{{ scope.row.orderSn }}</el-button>
        </template>
      </el-table-column>
      <el-table-column prop="merchantStudentName" label="学员姓名"/>
      <el-table-column prop="amount" label="订单金额（元）" min-width="80"/>
      <el-table-column prop="contractTypeName" label="签约类型" min-width="80"/>
      <el-table-column prop="opName" label="录单人" min-width="80"/>
      <el-table-column prop="chargeTypeName" label="支付方式" min-width="80"/>
      <el-table-column prop="chargeTime" label="支付时间" min-width="120">
        <div slot-scope="order">
          {{ order.row.chargeTime | formatDate('yyyy-MM-dd hh:mm') }}
        </div>
      </el-table-column>
      <el-table-column prop="payOrderNo" label="支付单号"/>
      <el-table-column prop="orderStatusName" label="订单状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.orderStatus === 1" type="info">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else-if="scope.row.orderStatus === 2" type="warning">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else-if="scope.row.orderStatus === 9" type="warning">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else-if="scope.row.orderStatus === 10" type="danger">{{ scope.row.orderStatusName }}</el-tag>
          <el-tag v-else type="success">{{ scope.row.orderStatusName }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="auditStatusName" label="审批状态"/>
      <el-table-column prop="auditOpName" label="审单人" width="70"/>
      <el-table-column prop="auditRemark" label="审核备注" min-width="120"/>
      <el-table-column label="操作" width="110">
        <template slot-scope="scope">
          <router-link :to="`/finance/order/detail/${scope.row.orderSn}`">
            <el-button type="text">详情</el-button>
          </router-link>
          <em class="block-col"/>
          <el-button v-permission="['ADMIN', 'AUDIT_ALL', 'ORDER_AUDIT']" :disabled="scope.row.orderStatus !== 2" type="text" @click="handleAudit(scope.row)">审批</el-button>
        </template>
      </el-table-column>
    </el-table>

    <!--分页组件-->
    <div class="pg-wrapper">
      <el-pagination
        :total="total"
        layout="total, prev, pager, next, sizes"
        @size-change="sizeChange"
        @current-change="pageChange"/>
    </div>

    <!-- 订单审核对话框 -->
    <order-audit ref="auditForm" 
      :order-sn="orderSn"
      :remark="remark"
      :amount="amount"
      :chargeTypeName="chargeTypeName"
      :payOrderNo="payOrderNo"
      @auditSubmit="auditSuccess"/>
  </div>
</template>

<script>
import initData from '@/mixins/initData'
import OrderAudit from '../../components/order/OrderAudit'

export default {
  name: 'OrderList',
  components: { OrderAudit },
  mixins: [initData],
  data() {
    return {
      orderSn: null,
      remark: '',
      amount: 0,
      chargeTypeName: '',
      payOrderNo: '',
      filters: {
        orderSn: '',
        orderStatus: '',
        date: []
      },
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
            picker.$emit('pick', [start, end])
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date()
            const start = new Date()
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
            picker.$emit('pick', [start, end])
          }
        }]
      },
      // 前台查询的状态列表
      statusList: this.$store.getters.orderStatusList
    }
  },
  created() {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    beforeInit() {
      this.params = {
        orderSn: this.filters.orderSn,
        status: this.filters.orderStatus,
        page: this.page,
        size: this.size
      }
      if (this.filters.date != '' && this.filters.date != null) {
        this.params.date = this.filters.date.join(',')
      }
      this.url = 'order/list'
      return true
    },
    // 显示详情页面
    handleView: function(row) {
      this.$router.push({
        path: `/finance/order/detail/${row.orderSn}`
      })
    },
    // 子窗口信息审核成功
    auditSuccess(val) {
      if (val === true) {
        this.init()
      }
    },
    handleAudit(row) {
      this.orderSn  = row.orderSn
      this.remark   = row.remark
      this.amount   = row.amount
      this.chargeTypeName = row.chargeTypeName
      this.payOrderNo = row.payOrderNo
      this.$refs.auditForm.dialog = true
    }
  }
}
</script>
<style lang="css" scoped>
</style>
